import React, { Component } from "react";
import { View, Text, TextInput, TouchableOpacity } from "react-native";
import NavBarConfig from "../modules/NavBar";
import http from "../../util/http";
import { getTimer } from "../../util/util";
import { WIDTH_VERIFY, WIDTH_DRAWAL, MEMBER, WALLET,BGT_INFO } from "../../config/Api";
import { toast } from "../../util/tip";
import Base64 from "../../util/base64";
import moneyStyles from "../../style/pages/getmoney";

class GetMoney extends Component {
  static navigationOptions = ({ navigation }) =>
    NavBarConfig(
      {
        headerTitle: "提幣"
      },
      navigation
    );
  state = {
    bgt: {},
    amountShow: 0,
    tel: "",
    verifyMsg: "獲取驗證碼",
    //dom

    code: "",
    password: "",
    address: "",
    amount: ""
  };

  setAllBgtAmount() {
    // this.setState({
    //   amount: this.state.amountShow
    // });
  }

  async getBgtInfo() {
    const data = await http.get(WALLET);
    this.setState({
      amountShow: data.data.amount - data.data.freeze_amount
    });
  }

  async getMemberInfo() {
    const data = await http.get(MEMBER);
    this.setState({
      tel: data.data.tel
    });
  }

  async handleSendCode() {
    const value = this.state.tel;
    if (!value) {
      return;
    }
    const data = await http.post(WIDTH_VERIFY, {
      tel: value
    });
    if (data) {
      getTimer(
        50,
        time => {
          this.setState({
            verifyMsg: `${time}s`
          });
        },
        () => {
          this.setState({
            verifyMsg: "獲取驗證碼"
          });
        }
      );
    }
  }

  async getWalletInfo() {
    const data = await http.get(BGT_INFO);
    this.setState({
      bgt: data.data
    });
  }
  async handleSubmitGetMoney() {
    const amount = this.state.amount.trim();
    const password = this.state.password.trim();
    const code = this.state.code.trim();
    const address = this.state.address.trim();
    if (!amount) {
      toast("請填寫正確的金額");
      return;
    }
    if (!password) {
      toast("請填寫支付密碼");
      return;
    }
    if (!code) {
      toast("請填寫正確的驗證碼");
      return;
    }
    if (!address) {
      toast("請填寫正確的驗證碼");
      return;
    }

    const data = await http.post(WIDTH_DRAWAL, {
      amount: amount,
      password: Base64.encode(password),
      code: code,
      address: address
    });
    if (data) {
      toast("提交提幣成功，请耐心等待");
      this.props.navigation.goBack();
    }
  }

  changeValue(key, text) {
    let data = {};
    data[key] = text;
    this.setState({
      ...data
    });
  }

  componentWillMount() {
    this.getMemberInfo();
    this.getBgtInfo();
    this.getWalletInfo();
  }

  render() {
    return (
      <View>
        <View style={moneyStyles.container}>
          <View style={moneyStyles.containItem}>
            <Text
              style={[
                moneyStyles.itemLeft,
                {
                  flex: 1
                }
              ]}
            >
              提幣比
            </Text>
            <Text style={moneyStyles.itemRight}>{parseFloat(this.state.bgt.usdt_rate || 10)} BGT : 1 USDT</Text>
          </View>
          <View style={moneyStyles.containItem}>
            <Text
              style={[
                moneyStyles.itemLeft,
                {
                  flex: 1
                }
              ]}
            >
              代幣
            </Text>
            <Text style={moneyStyles.itemRight}>{this.state.amountShow}</Text>
          </View>
          <View style={moneyStyles.containItem}>
            <Text style={moneyStyles.itemLeft}>提取</Text>
            <TextInput
              underlineColorAndroid="transparent"
              style={moneyStyles.itemCenter}
              keyboardType="numeric"
              placeholder={`最多可贖回${this.state.amountShow}個代幣`}
              onChangeText={text => this.changeValue("amount", text)}
            />
            <TouchableOpacity onPress={this.setAllBgtAmount.bind(this)}>
              {/* <Text style={[moneyStyles.itemRight, moneyStyles.all]}>全部</Text> */}
            </TouchableOpacity>
          </View>
          <View style={moneyStyles.containItem}>
            <TextInput
              underlineColorAndroid="transparent"
              style={moneyStyles.itemCenter}
              placeholder="請輸入USDT地址"
              onChangeText={text => this.changeValue("address", text)}
            />
          </View>
          <View style={moneyStyles.containItem}>
            <TextInput
              underlineColorAndroid="transparent"
              type="text"
              style={moneyStyles.itemCenter}
              placeholder="請輸入短信驗證碼"
              onChangeText={text => this.changeValue("code", text)}
            />
            <TouchableOpacity
              onPress={this.handleSendCode.bind(this)}
              style={[moneyStyles.getmoneyVerify, { top: 10, right: 10 }]}
              disabled={
                !this.state.tel || this.state.verifyMsg !== "獲取驗證碼"
              }
            >
              <Text style={moneyStyles.getmoneyVerify}>
                {this.state.verifyMsg}
              </Text>
            </TouchableOpacity>
          </View>
          <View style={moneyStyles.containItem}>
            <TextInput
              underlineColorAndroid="transparent"
              password={true}
              secureTextEntry={true}
              style={moneyStyles.itemCenter}
              placeholder="請輸入支付密碼"
              onChangeText={text => this.changeValue("password", text)}
              maxLength={6}
            />
          </View>
          <TouchableOpacity onPress={this.handleSubmitGetMoney.bind(this)}>
            <Text style={moneyStyles.confirmGetmoney}>確定</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

export default GetMoney;
